<template>
    <div>
        <div>
            <yd-flexbox style="background-color:#00B2EE;height:1.6rem">
                <yd-flexbox-item style="text-align:center;" @click.native="routerJump('/qrcode')">
                    <img src="../img/code.png" style="width:0.6rem;height:0.6rem">
                    <div class="font_color">付款码</div>
                </yd-flexbox-item>
                <yd-flexbox-item style="text-align:center;">
                    <yd-icon name="qrscan" color="#FFFFFF"></yd-icon>
                    <div class="font_color">扫一扫</div>
                </yd-flexbox-item>
                <yd-flexbox-item style="text-align:center;" @click.native="routerJump('/cardPackage')">
                    <img src="../img/package.png" style="width:0.6rem;height:0.6rem">
                    <div class="font_color">卡包</div>
                </yd-flexbox-item>
                <yd-flexbox-item style="text-align:center;" @click.native="routerJump('/wallet')">
                    <img src="../img/wallet.png" style="width:0.6rem;height:0.6rem">
                    <div class="font_color">钱包</div>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="function">
            <yd-grids-group :rows="4" class="secondRow">
                <yd-grids-item link="/bathe">
                    <img src="../img/bathe.png" slot="icon" class="colorIcon">
                    <span slot="text">洗澡</span>
                </yd-grids-item>
                <yd-grids-item link="/guard">
                    <img src="../img/door.png" slot="icon" class="colorIcon">
                    <span slot="text">门禁</span>
                </yd-grids-item>
                <yd-grids-item>
                    <img src="../img/book.png" slot="icon" class="colorIcon">
                    <span slot="text">图书</span>
                </yd-grids-item>
            </yd-grids-group>
        </div>
        <div>
            <yd-flexbox style="background-color:white;margin-top:0.1rem;padding:0.1rem">
                <div>
                    <img src="../img/ball.png" style="width:0.7rem;height:0.7rem">
                </div>
                <yd-flexbox-item style="margin-left:0.2rem">
                    <ul>
                        <li>荣耀V9 3月超级钜惠！</li>
                        <li>3.23京东超级品牌日格力盛典</li>
                    </ul>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div>
            <yd-slider autoplay="3000" pagination-color="#FFFFFF" pagination-activecolor="#00B2EE" style="height:1.7rem;margin-top:0.1rem">
                <yd-slider-item>
                    <a href="http://www.ydcss.com">
                        <img src="http://static.ydcss.com/uploads/ydui/1.jpg">
                    </a>
                </yd-slider-item>
                <yd-slider-item>
                    <a href="http://www.ydcss.com">
                        <img src="http://static.ydcss.com/uploads/ydui/2.jpg">
                    </a>
                </yd-slider-item>
                <yd-slider-item>
                    <a href="http://www.ydcss.com">
                        <img src="http://static.ydcss.com/uploads/ydui/3.jpg">
                    </a>
                </yd-slider-item>
        </yd-slider>
        </div>
    </div>
</template>
<script>
export default {
    name: 'HomePage',
    data () {
        return {
            user: ''
        }
    },
    methods: {
        // 点击路由跳转
        routerJump (path) {
            this.$router.push(path)
        }
    }
}
</script>
<style scoped>
/* .function{
    margin-top: 0.1rem;
} */
.font_color{color: white; }
.colorIcon{height: 0.55rem; width: 0.55rem;}
/* 去除网格的竖向分割线 */
.yd-grids-4 .yd-grids-item:not(:nth-child(4n)):before{content: none;}
</style>
